<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表+表单+新元素</title>
	</head>
	<body>
		<h1>列表元素：集合-一组相同数据</h1>
		<!-- 第一种使用方式：无序列表 使用率高：网站优化，有利于SEO优化-->
		<ul>
			<li>哪吒</li>
			<li>白雪公主</li>
			<li>熊出没</li>
		</ul>
		<!-- 第二种使用方式：有序列表 -->
		<ol>
			<li>大头儿子和小头爸爸</li>
			<li>邋遢大王</li>
			<li>喜羊羊与灰太狼</li>
		</ol>
		<!-- 第三种使用方式：定义列表 解释小图片-->
		<dl>
			<dt><img src="img/1.png.png"></dt>
			<dd>这是伊布</dd>
		</dl>
		<h1>表单元素</h1>
		<!-- 采集用户信息：账户登录、颜色、功能性操作 -->
		<form>
		账号：<input type="text" />
		密码：<input type="password" />
		<button>按钮</button>
		<input type="submit" />
		<input type="reset" />
		男 <input type="radio" name="sex">
		女 <input type="radio" name="sex">
		肉 <input type="checkbox">
		菜 <input type="checkbox">
		汤 <input type="checkbox">
		</form>
		<h1>新元素</h1>
		<!-- 记号笔元素 -->
		lorem <mark>lorems</mark>
		<!-- 度量元素 -->
		<meter value="60" max="100"min="1"></meter>
		<!-- 细节元素 -->
		<details>
			<summary>默认显示效果</summary>
			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, assumenda nemo rerum veritatis nobis aliquam ad dignissimos placeat, dolore corporis maiores quos explicabo, amet consectetur alias! Corrupti ut nobis ad.</div>
			</details>
	</body>
</html>